/*
   Image map plugin
   @author: innocentusphp@googlemail.com
*/
jQuery.fn.JImageMap = function(options){

    var defaults = {
        basePath: "[...path_here...]\\",
                blankGif: "[...path_here...]\\map\\pixel.gif"
    };
    var options = $.extend(defaults, options);
        
     //functions
         //Shows an image as overlay
     function showOverlay(src){
         //Change image of overlay:
                 overlay_img.attr("src", src);
     }
         //Unloads the overlay image and hides the overlay itself
     function hideOverlay(){
         //Reset the overlay:
                 overlay_img.attr("src", options.blankGif);
     }
         //Event handler for area-tags
         function handleMouseover(){
             //Get the id of the hovered area:
                 id = $(this).attr("id");
                 //Generate hover-image-url:
                 src = options.basePath + "" + id + "_hover.gif";
                 //Change overlay-image:
                 showOverlay(src);
         }
         //Event handler for area-tags
         function handleMouseout(){
             hideOverlay();
         }
         
     //Konstruktor initialization code:
     //Get imagemap of image:
         var imagemap = $(this.attr("usemap"));
              
         //Create a container-div for overlay(-image):
         var container = $("<div>").attr({
         id: imagemap.attr("id") + "_container"
     }).css({
             width:"100%",
                 height:"100%"
     });
         this.wrap(container);
         container = this.parent();
         
         //Create map-div:
         var map_div = $("<div></div>").attr({
        id: imagemap.attr("id") + "_map_div"
     }).css({
            position:"absolute"
         });
         this.wrap(map_div);
         
         //Create overlay-div:
         var overlay_div = $("<div></div>").attr({
        id: imagemap.attr("id") + "_overlay_div"
     }).css({
            position:"absolute"
         });
         overlay_div.appendTo(container);
         
         //Create overlay-image:
         var overlay_img = $("<img>").attr({
         id: imagemap.attr("id") + "_overlay_img",
                 src:options.blankGif
     }).css({
             width:this.attr("width"),
                 height:this.attr("height"),
                 border:"none"
     });
         overlay_img.appendTo(overlay_div);
                  
         //Cycle trough all areas of the imagemap and preload and add events to them:
         imagemap.find('>area').each(function (i, obj)  {
            $(obj).mouseover(
                handleMouseover
                );
            $(obj).mouseout ( 
                handleMouseout
            );
        }
        );
    
    //Swap usemap:
        overlay_img.attr("usemap", this.attr("usemap"));
        this.removeAttr("usemap");
        
};
